<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔鲜儿首页</title>
    <link rel="stylesheet" href="../css/global.css">
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <!-- 整个页面的容器 -->
    <div id="whole_wrap">
        <!-- 顶部固定栏 -->
        <div class="iot_top_fixedbar">
            <div id="top_logo">
                <div class="iot_rabbit">小兔鲜儿</div>
                <div class="iot_gap_line">|</div>
                <!-- 符号修改 -->
                <div class="iot_slogan">新鲜·亲民·快捷</div>
            </div>
            <div id="buttom_search">
                <div class="iot_search_bar">
                    <div class="iot_search_logo"><img src="../icons/search.svg"></div>
                    <div class="iot_default_text">搜索商品</div>
                    <div class="iot_scan_logo"><img src="../icons/scan.svg"></div>
                </div>
            </div>
        </div>
        <!-- 主体内容区域 -->
        <div class="iot_main_body">
            <!-- 空白块，把被挡住的内容往下面挤出来 -->
            <div class="iot_block_part">1</div>
            <!-- 轮播图 -->
            <div class="iot_top_slide">
                <div class="iot_slide"><img src="" class="iot_slide_img"></div>
                <div class="iot_slide"><img src="" class="iot_slide_img"></div>
                <div class="iot_slide"><img src="" class="iot_slide_img"></div>
                <div class="iot_slide"><img src="" class="iot_slide_img"></div>
                <div class="iot_slide"><img src="" class="iot_slide_img"></div>
                <div class="iot_slide_state">
                    <div class="iot_slide_point active"></div>
                    <div class="iot_slide_point"></div>
                    <div class="iot_slide_point"></div>
                    <div class="iot_slide_point"></div>
                    <div class="iot_slide_point"></div>
                </div>
            </div>
            <script src="../js/advertisement.js"></script>
            <!-- 分类区 -->
             <div class="iot_classes_wrap">
                <div class="iot_classes">
                    <div class="iot_class_item">
                        <div class="iot_class_icon">
                            <img src="#" class="iot_icon_img">
                        </div>
                        <div class="iot_class_title">居家</div>
                    </div>
                    <div class="iot_class_item">
                        <div class="iot_class_icon">
                            <img src="#" class="iot_icon_img">
                        </div>
                        <div class="iot_class_title">居家</div>
                    </div>
                    <div class="iot_class_item">
                        <div class="iot_class_icon">
                            <img src="#" class="iot_icon_img">
                        </div>
                        <div class="iot_class_title">居家</div>
                    </div>
                    <div class="iot_class_item">
                        <div class="iot_class_icon">
                            <img src="#" class="iot_icon_img">
                        </div>
                        <div class="iot_class_title">居家</div>
                    </div>
                    <div class="iot_class_item">
                        <div class="iot_class_icon">
                            <img src="#" class="iot_icon_img">
                        </div>
                        <div class="iot_class_title">居家</div>
                    </div>
                    <div class="iot_class_item">
                        <div class="iot_class_icon">
                            <img src="#" class="iot_icon_img">
                        </div>
                        <div class="iot_class_title">居家</div>
                    </div>
                    <div class="iot_class_item">
                        <div class="iot_class_icon">
                            <img src="#" class="iot_icon_img">
                        </div>
                        <div class="iot_class_title">居家</div>
                    </div>
                    <div class="iot_class_item">
                        <div class="iot_class_icon">
                            <img src="#" class="iot_icon_img">
                        </div>
                        <div class="iot_class_title">居家</div>
                    </div>
                    <div class="iot_class_item">
                        <div class="iot_class_icon">
                            <img src="#" class="iot_icon_img">
                        </div>
                        <div class="iot_class_title">居家</div>
                    </div>
                    <div class="iot_class_item">
                        <div class="iot_class_icon">
                            <img src="#" class="iot_icon_img">
                        </div>
                        <div class="iot_class_title">居家</div>
                    </div>
                </div>
                <script src="../js/classes.js"></script>
            </div>
             <!-- 推荐区 -->
                  <!-- 边框可加上 -->
              <div class="iot_recommend">
                <div class="iot_recommend_item">
                    <div class="iot_recommend_top">
                    &nbsp;
                    <div class="iot_recommend_title">特惠推荐</div>
                    &nbsp;&nbsp;&nbsp;
                    <div class="iot_recommend_title_two">精选全攻略</div>
                    </div>
                    <div class="iot_recommend_img" id="one">   
                        <img src="../images/tehui1.png">
                        <img src="../images/tehui2.png">
                    </div>
                </div>
                <div class="iot_recommend_item">
                    <div class="iot_recommend_top">
                        &nbsp;
                        <div class="iot_recommend_title">爆款推荐</div>
                        &nbsp;&nbsp;&nbsp;
                        <div class="iot_recommend_title_two">最受欢迎</div>
                        </div>
                        <div class="iot_recommend_img" id="two">   
                            <img src="../images/baokuan1.jpg">
                            <img src="../images/baokuan2.png">
                        </div>
                </div>
                <div class="iot_recommend_item">
                    <div class="iot_recommend_top">
                        &nbsp;
                        <div class="iot_recommend_title">一站买全</div>
                        &nbsp;&nbsp;&nbsp;
                        <div class="iot_recommend_title_two">精心优选</div>
                        </div>
                        <div class="iot_recommend_img" id="three">   
                            <img src="../images/yizhan1.jpg">
                            <img src="../images/yizhan2.png">
                        </div>
                </div>
                <div class="iot_recommend_item">
                    <div class="iot_recommend_top">
                        &nbsp;
                        <div class="iot_recommend_title">新鲜好物</div>
                        &nbsp;&nbsp;&nbsp;
                        <div class="iot_recommend_title_two">生活加分项</div>
                        </div>
                        <div class="iot_recommend_img" id="four">   
                            <img src="../images/xinxian1.jpg">
                            <img src="../images/xinxian2.png">
                        </div>
                </div>
                <script>
                    var one = document.querySelector("#one")
                    var two = document.querySelector("#two")
                    var three = document.querySelector("#three")
                    var four = document.querySelector("#four")
                    one.addEventListener("click",()=>{
                        window.location = "preference.html"
                    })
                    two.addEventListener("click",()=>{
                        window.location = "hotrecommend.html"
                    })
                    three.addEventListener("click",()=>{
                        window.location = "onebuyall.html"
                    })
                    four.addEventListener("click",()=>{
                        window.location = "freshgood.html"
                    })
                </script>
              </div>
              <!-- 猜你喜欢logo -->
               <div class="iot_like_logo">
                <div class="iot_like_logo_icon"><img src="../icons/likeicon.svg"></div>
                &nbsp;
                <div class="iot_like_text">猜你喜欢</div>
                &nbsp;
                <div class="iot_like_logo_icon"><img src="../icons/likeicon.svg"></div>
               </div>
              <!-- 猜你喜欢 -->
               <div class="iot_guess_like" style="height: 960px;">
                    <div class="iot_guess_like_item">
                        <div class="iot_item_img_info">
                            <img src="" class="iot_item_img">
                            <p class="iot_item_info">冻干豚骨藤椒面74g</p>
                        </div>
                        <div class="iot_item_price">￥79.00</div>
                    </div>
                    <div class="iot_guess_like_item">
                        <div class="iot_item_img_info">
                            <img src="" class="iot_item_img">
                            <p class="iot_item_info">冻干豚骨藤椒面74g</p>
                        </div>
                        <div class="iot_item_price">￥79.00</div>
                    </div>
                    <div class="iot_guess_like_item">
                        <div class="iot_item_img_info">
                            <img src="" class="iot_item_img">
                            <p class="iot_item_info">冻干豚骨藤椒面74g</p>
                        </div>
                        <div class="iot_item_price">￥79.00</div>
                    </div>
                    <div class="iot_guess_like_item">
                        <div class="iot_item_img_info">
                            <img src="" class="iot_item_img">
                            <p class="iot_item_info">冻干豚骨藤椒面74g</p>
                        </div>
                        <div class="iot_item_price">￥79.00</div>
                    </div>
                    <div class="iot_guess_like_item">
                        <div class="iot_item_img_info">
                            <img src="" class="iot_item_img">
                            <p class="iot_item_info">冻干豚骨藤椒面74g</p>
                        </div>
                        <div class="iot_item_price">￥79.00</div>
                    </div>
                    <div class="iot_guess_like_item">
                        <div class="iot_item_img_info">
                            <img src="" class="iot_item_img">
                            <p class="iot_item_info">冻干豚骨藤椒面74g</p>
                        </div>
                        <div class="iot_item_price">￥79.00</div>
                    </div>
                    <div class="iot_guess_like_item">
                        <div class="iot_item_img_info">
                            <img src="" class="iot_item_img">
                            <p class="iot_item_info">冻干豚骨藤椒面74g</p>
                        </div>
                        <div class="iot_item_price">￥79.00</div>
                    </div>
                    <div class="iot_guess_like_item">
                        <div class="iot_item_img_info">
                            <img src="" class="iot_item_img">
                            <p class="iot_item_info">冻干豚骨藤椒面74g</p>
                        </div>
                        <div class="iot_item_price">￥79.00</div>
                    </div>
                    <div class="iot_guess_like_item">
                        <div class="iot_item_img_info">
                            <img src="" class="iot_item_img">
                            <p class="iot_item_info">冻干豚骨藤椒面74g</p>
                        </div>
                        <div class="iot_item_price">￥79.00</div>
                    </div>
                    <div class="iot_guess_like_item">
                        <div class="iot_item_img_info">
                            <img src="" class="iot_item_img">
                            <p class="iot_item_info">冻干豚骨藤椒面74g</p>
                        </div>
                        <div class="iot_item_price">￥79.00</div>
                    </div>
               </div>
        </div>
        <script src="../js/guesslike.js"></script>
        <!-- 底部tab栏 -->
        <div class="iot_footer_tab">
            <div class="iot_footer_tab_item">
                <a href="#">
                <div class="iot_footer_tab_icon"><img src="../icons/index.svg"></div>
                <div class="iot_footer_tab_title" style="color: #27ba9b;">首页</div>
                </a>
            </div>
            <div class="iot_footer_tab_item">
                <a href="class.html">
                <div class="iot_footer_tab_icon"><img src="../icons/sort.svg"></div>
                <div class="iot_footer_tab_title">分类</div>
                </a>
            </div>
            <div class="iot_footer_tab_item">
                <a href="shopcar.html">
                <div class="iot_footer_tab_icon"><img src="../icons/shopcar.svg"></div>
                <div class="iot_footer_tab_title">购物车</div>
                </a>
            </div>
            <div class="iot_footer_tab_item">
                <a href="my.html">
                <div class="iot_footer_tab_icon"><img src="../icons/wode.svg"></div>
                <div class="iot_footer_tab_title">我的</div>
                </a>
            </div>
        </div>
    </div>
<script>
    var items = document.querySelectorAll('.iot_guess_like_item')
    for(let i=0;i<items.length;i++){
        items[i].addEventListener('click',()=>{
            window.location = 'itemdetail.html'
    })
    }
</script>
</body>
</html>